<template>
  <div class="app">
    
    <button @tap="showview">Show</button>

    <view class="bg" v-show="show"></view>
    <view class="show" v-show="show" :class="'fs'+fs">
      <view class="content item1" v-show="item==3">我是内容333</view>
      <view class="content item2" v-show="item==2">我是内容222</view>
      <view class="content item3" v-show="item==1">我是内容111</view>
      <view class='txt' @tap='next' v-show="show">下一步</view>
    </view>

  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {

  computed: {
    ...mapState([
      // 将this.fs 映射为 store.state.fs
      'fs'
    ])
  },

  data () {
    return {
      show: [1,2,3],
      item: 3,

      // fs: this.globalData.fs
    }
  },

  onShow () {
    this.fs = this.globalData.fs
    // console.log(this.globalData.fs)
  },
  methods: {
    hideview () {
      this.show = false
      console.log(this.show)
    },
    next () {
      this.item-- 
      if (this.item === 0) {
        this.show = false
      }
    },
    showview () {
      this.item = 3
      this.show = true
      console.log(this.show)
    }
  }
}
</script>

<style lang="scss" scoped>

.bg {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.7;
  opacity: 0.70;
  filter: alpha(opacity=70);
}
 
.show {
  text-align: center;
  position: absolute;
  top: 10%;
  left: 10%;
  width: 53%;
  height: 80%;
  padding: 8px;
  // border: 8px solid #e8e9f7;
  // background-color: white;
  z-index: 1002;
  overflow: auto;
  .content {
    background-color: #fff;
  }
  .item1 {
    position: absolute;
    top: 100rpx;
  }
  .item2 {
    position: absolute;
    top: 200rpx;
    left: 100rpx;
  }
  .item3 {
    position: absolute;
    top: 300rpx;
    left: 300rpx;
  }
  .txt{
    position: absolute;
    bottom: 0;
    right: 0;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: royalblue
  }
  
}

</style>
